<div class="container-fluid" id="cmis-container">
    <div ng-show="progress==100 && !hideRetireNotify" class="retired-notify">
        <div class="text-center width-50">
            <span>
                <img src="" alt="">
            </span>
        </div>
        <div class="text-left">
            <span>{{'retired-notify' | translate }}</span>
        </div>
        <div class="">
            <span class="pull-right" ng-click="closeRetireNotify()">
                <img src="" alt="">
            </span>
        </div>
    </div>
    <!--<div>amazing</div>-->
    <!--<div>test</div>-->
    <!--<div class="cloud-reading-share"></div>-->
    <div class="row status-container" ng-hide="progress==100">
        <!-- you can change top property to make it up or down in .init -->
        <div class="init" ng-hide="serverError">
            <span>
                <!--<i class="fa fa-spinner fa-pulse"></i> {{'loading' | translate }}-->
                <img src="img/loading.gif" alt="" style="width: 40px;">
            </span>
        </div>
        <div class="server-error-container dis-table text-center" ng-show="serverError">
            <div class="dis-table-cell ver-middle">
                <img src="" alt="">
                <h4 style="margin:10px 0 200px 0;">{{'server_error' | translate }}</h4>
            </div>
        </div>
    </div>

    <div ng-if="::pluginUi === 'pluginList'" class="row navbar-fixed-top cloud-reading-nav-shadow" undroppable ng-class="{'hide':progress!=100||fromFillAndSign!=''}" style="margin-right: 55px;">
        <div class=" ba-col-m sub-bg-color" ng-class="{'pluginList':pluginUi}">
            <bread-crumb class="breadcrumb sub-bg-color n-p" style="overflow: hidden;"
                         folder-tree="folderTree"
                         db-click="dbClick"
                         chosed-file-document="choseFile.isDocument()"
                         chose-file="choseFile"
                         current-folder="currentFolder"
            >
            </bread-crumb>
        </div>
    </div>

    <div ng-if="::pluginUi !== 'pluginList'" class="row navbar-fixed-top cloud-reading-nav-shadow" undroppable ng-class="{'hide':progress!=100||fromFillAndSign!=''}">
        <div class="col-xs-12">
            <div class="col-lg-12" ng-class="{'col-md-8':device=='platform-pad','col-xs-12 col-md-8':device!='platform-pad'}">
                <div class="ba-col-m sub-bg-color">
                    <div class="pull-left">
                        <div class="pull-left" ng-show="searchResult.name">
                            <i ng-click="cancelSearch()" tooltip-placement="bottom" uib-tooltip="{{ 'back_to_pare_folder' | translate }}" class="fa fa-angle-left align-i" style="padding: 0 16px;font-size: 22px;"></i>
                            <span style="display: inline-block;line-height: 28px;height: 32px;vertical-align:middle;color: #f48a20;">{{ searchResult.name | translate }}</span>
                        </div>
                        <bread-crumb class="breadcrumb sub-bg-color n-p" style="overflow: hidden;"
                                     folder-tree="folderTree"
                                     db-click="dbClick"
                                     chosed-file-document="choseFile.isDocument()"
                                     chose-file="choseFile"
                                     current-folder="currentFolder"
                        >
                        </bread-crumb>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" ng-class="{'hide':progress!=100,'top-0':fromFillAndSign ,'top-30':!fromFillAndSign, 'top-00':pluginUi}">
        <div class="files-mess-box col-xs-12">
            <div file-dropzone dropzone-hover-class='active' id="file-list" class="col-xs-12 bor-right user-select-forbid"
            >
                <!-- phantom online -->
                <div ng-if="::(pluginUi != 'pluginList' && project!='cpdf360')" class="panel-heading document-head-ctrl" ng-include="templatePath + 'document-head-ctrl.html'"></div>
                <div ng-if="::(pluginUi != 'pluginList' && project=='cpdf360')" class="panel-heading document-head-ctrl" ng-include="templatePath + 'document-head-ctrl-cpdf360.html'"></div>
                <div ng-if="::pluginUi == 'pluginList'" class="panel-heading pull-right" style="padding: auto;">
                    <i class="fa fa-refresh adjust-btn" ng-click="refreshCurFolderList()"></i>
                </div>

                <div class="fil-box col-xs-12"
                     ng-class="{'col-md-8':detailPanelIsShow && filePickerModal!='saveAs', 'col-md-12':!detailPanelIsShow || filePickerModal=='saveAs'}"
                     context-menu="menuOptions(null)"
                     data-target="menu-upload">
                    <div class="spinner1 main-color loading-container" ng-if="currentFolder.children == null && currentFolder.loading">
                        <img class="loading-img" src="img/loading.gif" alt="">
                    </div>
                    <div class="spinner1 main-color loading-container" ng-if="loadingSearchResult">
                        <img class="loading-img" src="img/loading.gif" alt="">
                    </div>
                    <div class="" ng-if="isSharedWithMe && currentFolder.children == 0">
                        <div class="dnd-text text-center">
                            <div>
                                <img  src="" alt="">
                                <p style="margin-top: 10px">{{ 'no_files_shared' | translate }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="" ng-if="!isSharedWithMe">
                        <div class="dnd-text text-center search-without-result" ng-if="currentFolder.children == 0 && !loading && searchModeIsOn">
                            <div>
                                <img src="" alt="">
                                <p class="m-t-10">
                                    {{ 'no_result' | translate }}
                                </p>
                            </div>
                        </div>
                        <div class="dnd-text text-center"
                             ng-if="(currentFolder.children == 0 && !loading && !searchModeIsOn  && device =='mobile') && !currentFolder.isReadonly()">
                            <div>
                                <img src="" alt="">
                                <p class="m-t-10">
                                    {{ 'no_files' | translate }}
                                </p>
                            </div>
                        </div>
                        <div class="dnd-text text-center"
                             ng-if="(currentFolder.children == 0 && !loading && !searchModeIsOn  && filePickerModal !='saveAs' && device !='platform-pad' && device !='mobile') && !currentFolder.isReadonly()">
                            <div>
                                <img src="" alt="">
                                <p class="m-t-10" ng-if="docOwner">
                                    {{ 'right_click_upload' | translate }}
                                </p>
                                <p ng-if="docOwner">
                                    {{ 'drag_to_upload' | translate }}
                                </p>
                                <p ng-if="!docOwner" class="m-t-10">
                                    {{ 'no_files' | translate }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="dnd-text text-center" style="height:210px;"
                         ng-if="(currentFolder.children.length===0 || (currentFolder.folderList.length==0 && currentFolder.showDocumentList.length==0))
                    && !loading
                    && !searchModeIsOn
                    && pluginUi && (fileSelectMode || fileType)">
                        <div>
                            <img src="" alt="">
                            <p class="m-t-10">
                                {{ 'folder_empty' | translate }}
                            </p>
                        </div>
                    </div>
                    <div ng-show="trStyle && device!=='mobile'" class="list-header-part">
                        <div class="row">
                            <div ng-hide="isEdit" class="text-center share-container">&nbsp;</div>
                            <div ng-click="changeSort('name')" class="file-name-container col-xs-9 col-sm-6 cur-p">{{'name' | translate }}
                                <i ng-show="folderOrderBy.indexOf('name')!=-1" class="fa " ng-class="{'fa-long-arrow-down':folderOrderBy.indexOf('-')!=-1,'fa-long-arrow-up':folderOrderBy.indexOf('-')==-1}"></i>
                            </div>
                            <div class="col-xm-3 col-sm-2" ng-if="pluginUi != 'pluginList' && !isSharedWithMe">{{'owner' | translate }}</div>
                            <div class="hidden-xs col-sm-2" ng-if="pluginUi != 'pluginList' && isSharedWithMe">{{'shared_by' | translate }}</div>
                            <div class="hidden-xs col-sm-2 cur-p" ng-if="!smallScreen" ng-click="changeSort('lastModificationDate')">{{'date' | translate }}
                                <i ng-show="folderOrderBy.indexOf('lastModificationDate')!=-1" class="fa " ng-class="{'fa-long-arrow-down':folderOrderBy.indexOf('-')!=-1,'fa-long-arrow-up':folderOrderBy.indexOf('-')==-1}"></i>
                            </div>
                            <div class="cur-p hidden-xs col-sm-2" ng-if="!smallScreen" ng-click="changeSort('contentStreamLength')">{{'size' | translate }}
                                <i ng-show="folderOrderBy.indexOf('contentStreamLength')!=-1" class="fa " ng-class="{'fa-long-arrow-down':folderOrderBy.indexOf('-')!=-1,'fa-long-arrow-up':folderOrderBy.indexOf('-')==-1}"></i>
                            </div>
                        </div>
                    </div>
                    <div class="fil-wrap absolute_full scroll_auto_y panel-body" on-scroll-end="loadMoreChildren()" ng-if="trStyle==true" selection-aera>
                        <ion-content>
                            <ion-refresher on-refresh="refreshCurFolderList()"></ion-refresher>
                            <div class="back-icon" ng-if="device==='mobile' && !currentFolder.isRoot()">
                                <span ng-click="goToParentFolder()" class="pd-lr-10 dis-inl-blk pull-left"><i class="fa fa-chevron-left"></i></span>
                                <span class="pd-lr-10 dis-inl-blk pull-left font-14">|</span>
                                <span class="pd-lr-10 dis-inl-blk pull-left long-words-handle" style="max-width: 240px">{{ currentFolder.name | translate }}</span>
                            </div>
                            <!-- PC list-view-->
                            <div class="list-container" ng-if="currentFolder.children.length !=0 && device!=='mobile'">
                                <!-- folder -->
                                <div context-menu="menuOptions(file)" droppable
                                     class="cur-p select-list row"
                                     data-id="{{ ::file.id }}"
                                     data-target="menu-fold-{{ $index }}"
                                     data-navbar="navbar-fixed-top"
                                     ng-repeat="file in currentFolder.children | folder | orderBy:folderOrderBy track by $id(file)"
                                     ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 }"
                                     ng-dblclick="device !='platform-pad' && click(file)"
                                     ng-mousedown="device !='platform-pad' && click(file,$event)"
                                     ng-mouseup="fileMouseUp(file,$event)"
                                     on-tap="chooseFile(file)"
                                     on-double-tap="dbClick(file,$event)"
                                     ng-if="!(filePickerModal == 'saveAs' && file.isReadOnlyFolder())"
                                >

                                    <div class="tooltip-hint-parent file-name-container long-words-handle col-xs-9 col-sm-6" draggable>
                                        <span class="long-words-handle" title="{{file.name | translate}}">
                                            <i class="icon small {{ ::file.iconClass }}" ></i>
                                            <span class="tooltip-hint" ng-if="::!file.folderNeedTranslate">{{file.name}}</span>
                                            <span class="tooltip-hint" ng-if="::file.folderNeedTranslate">{{file.name | translate}}</span>
                                        </span>
                                    </div>
                                    <div class="long-words-handle col-xs-3 col-sm-2" ng-if="::pluginUi != 'pluginList'">{{::file.createdBy.getName()}}</div>
                                    <div class="long-words-handle hidden-xs col-sm-2" ng-if="::lang!='DK'" >{{::file.lastModificationDate | date:'yyyy/MM/dd' }}</div>
                                    <div class="long-words-handle hidden-xs col-sm-2" ng-if="::lang=='DK'" >{{::file.lastModificationDate | date:'dd,MMM,yyyy' | lowercase  }}</div>
                                    <div class="long-words-handle hidden-xs col-sm-2" >{{::file.contentStreamLength | bytes}}</div>

                                    <!--分享图标 folder 没有此图标 -->
                                    <!--<div class="share-container text-center">-->
                                    <!--<i class="fa fa-link"></i>-->
                                    <!--</div>-->
                                    <!-- 批量操作 -->
                                    <div ng-if="multipleSelectModeOn" class="select-status" on-tap="chooseOrNot(file,$event)" ng-class="{'is-selected':file.isSelected,'':!file.isSelected}">
                                        <span class="fa-stack fa-lg">
                                          <i class="fa fa-circle-o fa-stack-2x"></i>
                                          <i ng-show="file.isSelected" class="fa fa-check fa-stack-1x"></i>
                                        </span>
                                    </div>
                                    <!-- 右键菜单 -->
                                    <!--<div ng-show="filePickerModal!='saveAs'" class="dropdown position-fixed"-->
                                    <!--id="menu-fold-{{$index }}"-->
                                    <!--ng-include="rightClickPopUpPath">-->
                                    <!--</div>-->

                                </div>
                                <!-- document -->
                                <div context-menu="menuOptions(file)" close-menu-on="closeContextMenu" droppable
                                     class="cur-p select-list document-type row"
                                     data-id="{{ ::file.id }}"
                                     data-navbar="navbar-fixed-top"
                                     ng-repeat="file in currentFolder.children  | document:fileType | orderBy:folderOrderBy track by $id(file)"
                                     ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 }"
                                     ng-dblclick="device !='platform-pad' && click(file)"
                                     ng-mousedown="device !='platform-pad' && click(file,$event)"
                                     ng-mouseup="fileMouseUp(file,$event)"
                                     on-tap="chooseFile(file)"
                                >

                                    <div class="tooltip-hint-parent file-name-container long-words-handle col-xs-9 col-sm-6" draggable>
                                        <span class="long-words-handle" title="{{file.name | translate}}">
                                            <i class="icon small {{ ::file.iconClass }}" ></i>
                                            <span class="tooltip-hint">{{file.name}}</span>
                                        </span>
                                    </div>

                                    <div class="long-words-handle col-xs-3 col-sm-2" ng-if="::pluginUi != 'pluginList'">{{::file.createdBy.getName()}}</div>
                                    <div class="long-words-handle hidden-xs col-sm-2" ng-if="::lang!='DK'" >{{::file.lastModificationDate | date:'yyyy/MM/dd' }}</div>
                                    <div class="long-words-handle hidden-xs col-sm-2" ng-if="::lang=='DK'" >{{::file.lastModificationDate | date:'dd,MMM,yyyy' | lowercase  }}</div>
                                    <div class="long-words-handle hidden-xs col-sm-2" >{{::file.contentStreamLength | bytes}}</div>
                                    <!-- 分享图标 1 watch -->
                                    <div ng-if="::showShareIcon" class="share-container text-center">
                                        <span ng-if="file.sharedLink" class="share-icon-container" title="{{ 'shared' | translate }}">
                                            <i class="fa fa-link"></i>
                                            <span class="cloud-reading-share" file="file" current-scope="this"></span>
                                        </span>
                                    </div>
                                    <!-- 批量操作 1 watch -->
                                    <div ng-if="multipleSelectModeOn" class="select-status" on-tap="chooseOrNot(file,$event)" ng-class="{'is-selected':file.isSelected,'':!file.isSelected}">
                                        <span class="fa-stack fa-lg">
                                          <i class="fa fa-circle-o fa-stack-2x"></i>
                                          <i ng-show="file.isSelected" class="fa fa-check fa-stack-1x"></i>
                                        </span>
                                    </div>
                                    <!-- 右键菜单 -->
                                    <!--<div ng-show="filePickerModal!='saveAs'" class="dropdown position-fixed"-->
                                    <!--id="menu-doc-{{$index }}"-->
                                    <!--ng-include="rightClickPopUpPath">-->
                                    <!--</div>-->
                                </div>
                            </div>
                            <!-- mobile view -->
                            <div ng-if="currentFolder.children.length !=0 && device==='mobile'" class="tr-item-container">
                                <div
                                        context-menu="menuOptions(file)"
                                        class="cur-p mobile-list"
                                        data-id="{{ file.id }}"
                                        data-target="menu-doc-{{ $index }}"
                                        data-navbar="navbar-fixed-top"
                                        ng-repeat="file in currentFolder.children | folder | orderBy:folderOrderBy track by $id(file)"
                                        ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 }"
                                        ng-dblclick="device !='platform-pad' && click(file)"
                                        ng-mousedown="device !='platform-pad' && click(file,$event)"
                                        ng-mouseup="fileMouseUp(file,$event)"
                                        show-tooltip
                                        ng-if="!(filePickerModal == 'saveAs' && file.isReadOnlyFolder())"
                                >
                                    <div class="card icon-right">
                                        <span>
                                            <i class="icon-mobile {{ file.iconClass+'-mobile' }}"></i>
                                        </span>
                                        <h5 class="long-words-handle">{{file.name}}</h5>
                                        <span>{{file.lastModificationDate | date:'yyyy-MM-dd hh:mm'}}</span>
                                        <span>{{file.contentStreamLength | bytes}}</span>
                                        <!--<span class="hide" ng-mousedown="showInfo(file,$event)">-->
                                        <span ng-mousedown="showFileOptions(file,$event)">
                                            <!--<i class="icon icon-info"></i>-->
                                            <i class="icon-mobile icon-more"></i>
                                        </span>
                                    </div>
                                    <div class="dropdown position-fixed" id="menu-doc-{{ $index }}" ng-show="filePickerModal!='saveAs'" ng-include="rightClickPopUpPath">
                                    </div>
                                </div>
                                <div
                                        context-menu="menuOptions(file)"
                                        class="cur-p mobile-list"
                                        data-id="{{ file.id }}"
                                        data-target="menu-fold-{{ $index }}"
                                        data-navbar="navbar-fixed-top"
                                        ng-repeat="file in currentFolder.children | document | orderBy:folderOrderBy track by $id(file)"
                                        ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 }"
                                        ng-dblclick="device !='platform-pad' && click(file)"
                                        ng-mousedown="device !='platform-pad' && click(file,$event)"
                                        ng-mouseup="fileMouseUp(file,$event)"
                                        show-tooltip
                                        ng-if="!(filePickerModal == 'saveAs' && file.isReadOnlyFolder())"
                                >
                                    <div class="card icon-right">
                                        <span>
                                            <i class="icon-mobile {{ file.iconClass+'-mobile' }}"></i>
                                        </span>
                                        <h5 class="long-words-handle">{{file.name}}</h5>
                                        <span>{{file.lastModificationDate | date:'yyyy-MM-dd hh:mm'}}</span>
                                        <span>{{file.contentStreamLength | bytes}}</span>
                                        <!--<span class="hide" ng-mousedown="showInfo(file,$event)">-->
                                        <span ng-mousedown="showFileOptions(file,$event)">
                                            <!--<i class="icon icon-info"></i>-->
                                            <i class="fa fa-ellipsis-h font-16"></i>
                                        </span>
                                    </div>
                                    <!--<div class="dropdown position-fixed" id="menu-fold-{{ $index }}" ng-show="filePickerModal!='saveAs'" ng-include="rightClickPopUpPath">-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </ion-content>
                    </div>
                    <div class="fil-wrap absolute_full scroll_auto_y panel-body" on-scroll-end="loadMoreChildren()" style="padding: 32px;padding-top: 0px;top:0;border-top: 1px solid #eee;" ng-if="trStyle==false" selection-aera>
                        <ion-content>
                            <ion-refresher on-refresh="refreshCurFolderList()"></ion-refresher>
                            <div class="back-icon" ng-if="device==='mobile' && !currentFolder.isRoot()">
                                <span class="pd-lr-10 dis-inl-blk pull-left" ng-click="goToParentFolder()" ><i class="fa fa-chevron-left"></i></span>
                                <span class="pd-lr-10 dis-inl-blk pull-left font-14">|</span>
                                <span class="pd-lr-10 dis-inl-blk pull-left long-words-handle" style="max-width: 240px">{{ currentFolder.name | translate }}</span>
                            </div>
                            <div class="text-right hide-mobile p-t-10">
                                <span class="card-sort dropdown" ng-switch="folderOrderBy">
                                    <span class="card-sort-text" ng-switch-when="name" data-toggle="dropdown">
                                      {{'name'| translate}} <i class="fa fa-long-arrow-up"></i>
                                    </span>
                                    <span class="card-sort-text" ng-switch-when="-name" data-toggle="dropdown">
                                      {{'name'| translate}} <i class="fa fa-long-arrow-down"></i>
                                    </span>
                                    <span class="card-sort-text" ng-switch-when="lastModificationDate" data-toggle="dropdown">
                                      {{'date'| translate}} <i class="fa fa-long-arrow-up"></i>
                                    </span>
                                    <span class="card-sort-text" ng-switch-when="-lastModificationDate" data-toggle="dropdown">
                                      {{'date'| translate}} <i class="fa fa-long-arrow-down"></i>
                                    </span>
                                    <span class="card-sort-text" ng-switch-when="contentStreamLength" data-toggle="dropdown">
                                      {{'size'| translate}} <i class="fa fa-long-arrow-up"></i>
                                    </span>
                                    <span class="card-sort-text" ng-switch-when="-contentStreamLength" data-toggle="dropdown">
                                      {{'size'| translate}} <i class="fa fa-long-arrow-down"></i>
                                </span>
                                <ul class="dropdown-menu pull-right">
                                    <li ng-click="changeSort('name')"><a>{{'name'| translate}}
                                        <i class="fa fa-long-arrow-up" ng-switch-when="name"></i>
                                        <i class="fa fa-long-arrow-down" ng-switch-when="-name"></i>
                                    </a></li>
                                    <li ng-click="changeSort('lastModificationDate')"><a>{{'date'| translate}}
                                        <i class="fa fa-long-arrow-up" ng-switch-when="lastModificationDate"></i>
                                        <i class="fa fa-long-arrow-down" ng-switch-when="-lastModificationDate"></i>
                                    </a></li>
                                    <li ng-click="changeSort('contentStreamLength')"><a>{{'size'| translate}}
                                        <i class="fa fa-long-arrow-up" ng-switch-when="contentStreamLength"></i>
                                        <i class="fa fa-long-arrow-down" ng-switch-when="-contentStreamLength"></i>
                                    </a></li>
                                </ul>
                                </span>
                            </div>
                            <!-- PC grid view -->
                            <!-- folder watcher 7 -->
                            <div class="all-folder">
                                <!-- 注意这个里面的id 因为用的都是 file.id 如果 没有空格 因为id的唯一性 所以会报错 所以加上了空格  但是      -->
                                <!-- 这里有个非常有意思的差别   data.id={{file.id}} id={{file.id}}顺序不一样  会导致    chrome 和 fox浏览器 取值不一样 无论那种浏览器最终只能取一个值 要么 data.id有值  要么 id有值     -->
                                <div
                                        context-menu="menuOptions(file)" close-menu-on="closeContextMenu" droppable
                                        class="cur-p select-list"
                                        data-id="{{ ::file.id}}"
                                        data-navbar="navbar-fixed-top"
                                        ng-repeat="file in currentFolder.children | folder | orderBy:folderOrderBy track by $id(file)"
                                        ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 , 'check-out':file.isVersionSeriesCheckedOut}"
                                        ng-dblclick="device !='platform-pad' && click(file)"
                                        ng-mousedown="device !='platform-pad' && click(file,$event)"
                                        ng-mouseup="fileMouseUp(file,$event)"
                                        dynamic-width
                                        ng-if="!(filePickerModal == 'saveAs' && file.isReadOnlyFolder())"
                                >
                                    <div class="folder-type" draggable>
                                        <div class="icon icon-folder"></div>
                                        <div ng-if="multipleSelectModeOn" class="select-status card-select" on-tap="chooseOrNot(file,$event)" ng-class="{'is-selected':file.isSelected}">
                                            <span class="fa-stack fa-lg">
                                              <i class="fa fa-circle-o fa-stack-2x"></i>
                                              <i ng-show="file.isSelected" class="fa fa-check fa-stack-1x"></i>
                                            </span>
                                        </div>
                                        <div class="tooltip-hint-parent folder-name"
                                             title="{{file.name}}"
                                        >
                                            <span class="long-words-handle">
                                                <span class="tooltip-hint" ng-if="::!file.folderNeedTranslate">{{file.name}}</span>
                                                <span class="tooltip-hint" ng-if="::file.folderNeedTranslate">{{file.name | translate}}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- document watcher 10 -->
                            <div class="all-document">
                                <div
                                        context-menu="menuOptions(file)" droppable
                                        class="cur-p select-list"
                                        data-id="{{ ::file.id }}"
                                        data-navbar="navbar-fixed-top"
                                        dynamic-width
                                        ng-repeat="file in currentFolder.children  | document:fileType | orderBy:folderOrderBy track by $id(file)"
                                        ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 }"
                                        ng-dblclick="device !='platform-pad' && click(file)"
                                        ng-mousedown="device !='platform-pad' && click(file,$event)"
                                        ng-mouseup="fileMouseUp(file,$event)"
                                        on-tap="chooseFile(file)"
                                >
                                    <div class="document-type" draggable>
                                        <div ng-if="multipleSelectModeOn" class="select-status card-select" on-tap="chooseOrNot(file,$event)" ng-class="{'is-selected':file.isSelected}">
                                            <span class="fa-stack fa-lg">
                                              <i class="fa fa-circle-o fa-stack-2x"></i>
                                              <i ng-show="file.isSelected" class="fa fa-check fa-stack-1x"></i>
                                            </span>
                                        </div>
                                        <!-- 3 watchers  +3 -->
                                        <div data-id="{{::file.id}}" ng-if="::file.id" class="document-thumnail" ng-class="{'mobile':device==='mobile'}" width-height-ratio lazy-load-img>

                                            <span class="info-container" ng-if="::device=='mobile'" ng-mousedown="showInfo(file,$event)">
                                                <i class="icon icon-info"></i>
                                            </span>
                                            <span ng-if="::showShareIcon && file.sharedLink">
                                                <span class="check-out" title="{{ 'shared' | translate }}">
                                                    <i class="fa fa-link"></i>
                                                    <span class="cloud-reading-share" file="file" currentScope="this"></span>
                                                </span>
                                            </span>
                                            <img src="" ng-if="file.thumbImg!=''">
                                            <div class="no-thumbnails" ng-if="file.thumbImg==''">
                                                <i class="fa fa-file-text-o"></i>
                                            </div>
                                        </div>
                                        <!-- 2 watchers -->
                                        <div class="document-info">
                                            <div class="document-icon">
                                                <i class="fa fa-file" ></i>
                                            </div>
                                            <div class="tooltip-hint-parent document-name"
                                                 title="{{ file.name }}"
                                            >
                                            <span class="long-words-handle">
                                                <span class="tooltip-hint">{{file.name}}</span>
                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ion-content>
                    </div>
                    <!-- right click pop up-->
                    <!--<style>-->
                    <!--#menu-upload .dropdown-menu li a{-->
                    <!--height:40px;-->
                    <!--line-height:40px;-->
                    <!--}-->
                    <!--</style>-->
                    <div class="dropdown position-fixed" id="menu-upload" ng-if="::filePickerModal!='saveAs'">
                        <ul class="dropdown-menu" role="menu" ng-if="(currentFolder.allowableActions.canCreateDocument && supportFile) || currentFolder.allowableActions.canCreateFolder">
                            <li ng-if="currentFolder.allowableActions.canCreateFolder">
                                <a ng-click="createFolder()">
                                    <i class="icon icon-folder-open"></i> {{'create_folder' | translate}}
                                </a>
                            </li>
                            <li class="divider" ng-if="(currentFolder.allowableActions.canCreateDocument && supportFile) && currentFolder.allowableActions.canCreateFolder"></li>
                            <li ng-if="currentFolder.allowableActions.canCreateDocument && supportFile">
                                <a ng-click="setFileCDRMPerm(null,true)">
                                    <i class="icon icon-up"></i> {{'upload_file' | translate }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="file-detail" undroppable class="col-sm-12 col-md-4 file-detail" ng-style="{'width': smallScreen?'100%':''}" ng-class="{'hide':!detailPanelIsShow,'':detailPanelIsShow}" ng-if="detailPanelIsShow && filePickerModal!='saveAs'" ng-include="templatePath + 'file-detail.html'" ng-controller="FileDetailCtrl"></div>
            </div>

        </div>
        <div style="visibility: hidden;">
            <input id="upload-file" name="file" type="file" onchange="angular.element(this).scope().upload(this.files)" multiple="true" />
            <input id="upload-file-for-cDRM" name="file" type="file" onchange="angular.element(this).scope().upload(this.files)" multiple="true" accept="application/pdf" />
            <input id="modify-file" name="file" type="file" onchange="angular.element(this).scope().modifyFile(this.files[0])" />

        </div>
    </div>
    <div class="preview-mask ng-hide" ng-show="isFullScreenPreview || iframePdf">
        <i class="fa fa-spinner fa-pulse" style="font-size:20px;height:20px;width:20px;position: absolute;left:0;right:0;bottom:0;top:0;margin:auto;"></i>
    </div>
    <div id="previewNav" ng-show="isFullScreenPreview">
        <a class="ctl-large pencil_24 webpdftool hide-a6" id="btnTextEdit" title="Edit Text" style="top:5px;left: 10px;position: absolute;cursor: pointer;"></a>
        <a class="ctl-large delete_24 webpdftool hide-a6" id="btnFormFieldDel" title="Delete Form Field" style="top:5px;left: 50px;position: absolute;cursor: pointer;"></a>
        <button type="button" class="btn btn-primary hide-a6" id="btnDownloadModifyDoc" style="top:3px;left: 100px;position: absolute;">Download Modified Doc</button>
        <i ng-show="isFullScreenPreview" class="fa fa-download fa-2x color-f close-file ioon-x pull-right" ng-click="download(choseFile)" id="download-icon" style="right: 70px;top: 13px;font-size: 18px;"></i>
        <i ng-show="isFullScreenPreview" class="fa fa-times fa-3x color-f close-file ioon-x ng-hide pull-right" ng-click="closePreview($event)"></i>
    </div>
    <!-- pdf 预览-->
    <style>
        .close-btn-container{
            position: fixed;background: #474747;
            top: 4px;
            right: 49px;
            border: 1px solid #474747;
            width: 30px;
            text-align: center;
        }
        .close-btn-container:hover{
            background-color: hsla(0,0%,0%,.12);
            background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
            background-clip: padding-box;
            border: 1px solid hsla(0,0%,0%,.35);
            border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
            box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, 0 1px 0 hsla(0,0%,100%,.05);
            background: #474747;
        }
    </style>
    <div ng-show="isNormalFilePreview" style="position: fixed;top:0;width: 100%;z-index: 9999;left: 0;height: 100%;overflow-y:hidden ">
        <!--<div id="previewpdfNav" class="nav-for-preview">-->
        <!--<i title="{{ 'download' | translate }}"  class="fa fa-download fa-2x color-f close-file ioon-x pull-right download-btn" ng-click="download(choseFile)" id="download-icon" style="right: 0;position: relative;top: 15px;font-size: 18px;"></i>-->
        <div class="close-btn-container" style="">
            <i title="{{ 'close' | translate }}"  class="fa fa-times" ng-click="closePreview($event)" style="color: #ececec;font-size: 20px"></i>
        </div>
        <!--</div>-->
        <iframe name="previewFrame" ng-if="previewUrl" width="100%" height="100%"
                ng-src="{{previewUrl}}" allowtransparency="true"  title="Preview" frameborder="0"
                scrolling="no"></iframe>
    </div>
    <progress-bar-modal id="progress-bar-modal"></progress-bar-modal>
    <div id="previewPdf" ng-show="isFullScreenPreview">
        <div class="preview ng-hide" ng-show="isFullScreenPreview">
            <div ng-if="!choseFile.previewPdf">{{'loading' | translate }}</div>
            <span class="preview-span" ng-if="choseFile.imageSrc"><img ng-src="{{choseFile.imageSrc}}"/></span>
            <pre class="preview-content" ng-if="choseFile.previewText">{{choseFile.previewText}}</pre>
            <div id="docViewerContainer" ng-show="choseFile.previewPdf"></div>
        </div>
    </div>

    <!-- mobile below -->


    <div class="mobile-file-info animated neg-z-index" ng-if="device=='mobile'" ng-class="{'slideInRight':mobileShowInfo,'slideOutRight':!mobileShowInfo,'neg-z-index':!firstInit}">
        <div class="header text-center">
            <span ng-click="closeInfo()"><i class="fa fa-times"></i></span>
            <span>{{ 'details' | translate }}</span>
        </div>
        <ul>
            <li class="text-center">
                <div class="spinner1" ng-if="!choseFile.thumbImgLoaded && choseFile.thumbImg!==''">
                    <!--<div class="bounce1"></div>-->
                    <!--<div class="bounce2"></div>-->
                    <!--<div class="bounce3"></div>-->
                    <img class="loading-img" src="img/loading.gif" alt="">
                </div>
                <p ng-if="choseFile.thumbImg === false && choseFile.thumbImgBig === false"><a ng-click="choseFile.getRenditions(null,null,true)">{{'thumb_error' | translate }}</a></p>
                <!-- thumbImg 为空 那么 thumbImgBig 肯定为空-->
                <a class="border-1px" ng-class="{'hide':!choseFile.thumbImgLoaded && choseFile.thumbImgBig!=='' || !choseFile.thumbImgLoaded && choseFile.thumbImg!=='' ,'':choseFile.thumbImgLoaded||choseFile.thumbImgBig===''}">
                    <i style="font-size: 48px" class="fa fa-file-text-o" ng-if="choseFile.thumbImg===''"></i>
                    <img data-id="{{ choseFile.id }}" image-loaded-end ng-src="{{ choseFile.thumbImgBig || choseFile.thumbImg  }}" ng-if="choseFile.thumbImgBig || choseFile.thumbImg"/>
                </a>
                <p>{{ choseFile.name }}</p>
            </li>
            <!--<li class="row">-->
            <!--<div class="col-xs-6">-->
            <!--<span>{{ 'name' | translate }}:</span>    -->
            <!--</div>-->
            <!--<div class="col-xs-6">-->
            <!--<span>{{ choseFile.name }}</span>-->
            <!--</div>-->
            <!--</li>-->
            <!--<li>-->
            <!--<span>Path:</span>-->
            <!--<span style="word-break: break-all;">{{ choseFile.path }}</span>-->
            <!--</li>-->
            <!--<li>-->
            <!--<span>{{ 'size' | translate }}:</span>-->
            <!--<span>{{choseFile.contentStreamLength | bytes}}</span>-->
            <!--</li>-->
            <!--<li class="clearfix need-float">-->
            <!--<span>{{ 'create_by' | translate }}:</span>-->
            <!--<span class="long-words-handle usr-name">{{ choseFile.createdBy.getName() }}</span>-->
            <!--</li>-->
            <li class="row">
                <div class="col-xs-6">
                    <span>{{ 'creation_date' | translate }}:</span>
                </div>
                <div class="col-xs-6 text-right">
                    <span>{{ choseFile.creationDate | date:'yyyy-MM-dd' }}</span>
                </div>
            </li>
            <li class="row">
                <div class="col-xs-6">
                    <span>{{ 'last_modification_date' | translate }}:</span>
                </div>
                <div class="col-xs-6 text-right">
                    <span>{{ choseFile.lastModificationDate | date:'yyyy-MM-dd'}}</span>
                </div>
            </li>
        </ul>

        <ul class="version-container">
            <li>
                <h3>{{'versions' | translate }}:</h3>
            </li>
            <li class="row">
                <div class="col-xs-4">
                    <span>{{ 'label' | translate }}:</span><br>
                    <span>{{choseFile.versionLabel}}</span>
                </div>
                <div class="col-xs-4 text-center">
                    <span>{{ 'size' | translate }}:</span><br>
                    <span>{{choseFile.contentStreamLength | bytes}}</span>
                </div>
                <div class="col-xs-4 text-right">
                    <span>{{ 'action' | translate }}:</span><br>
                    <span><i style="width: 20px;height: 20px;" class="icon-mobile icon-down-mobile" ng-click="download(choseFile)"></i></span>
                </div>
            </li>
        </ul>
        <ul class="share-info hide">
            <li class="clearfix">
                <div class="share-with-txt">
                    {{ 'share_with' | translate }}:
                </div>
                <div class="share-details-container">
                    <div class="loading" ng-show="choseFile.loadingAce">
                        <i class="fa fa-spinner fa-pulse"></i>
                    </div>
                    <div class="share-details" ng-show="!choseFile.loadingAce">
                        <p ng-repeat="ace in choseFile.aces" ng-if="choseFile.aces.length>2">
                            <span ng-if="ace.userId==='guest'">{{ 'all_can_view' | translate }}</span>
                            <span ng-if="ace.userId!=='everyone' && ace.userId!==choseFile.createdBy.id && ace.userId!=='guest'">
                                {{ ace.userId }}
                            </span>
                        </p>
                        <p ng-if="choseFile.aces.length==2">
                            <span>{{ 'no_share_info' | translate }}</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="mobile-common-more-options animated neg-z-index" ng-if="device=='mobile'" ng-class="{'slideInUp':mobileShowOptionsPanel,'slideOutDown':!mobileShowOptionsPanel,'neg-z-index':!firstInit}">
        <div ng-show="firstInit" class="padding-15px">
            <!--<span ng-click="closeOptionsPanel()">-->
            <!--<i class="fa fa-times"></i>-->
            <!--</span>-->
            <div ng-if="commonOptions" ng-click="closeOptionsPanel()">
                <div class="row">
                    <div class="col-xs-4" ng-click="refreshCurFolderList()">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-refresh-mobile"></i></span></p>
                        <p class="text-center">{{ 'refresh' | translate }}</p>
                    </div>
                    <div class="col-xs-4" ng-click="changeDocShowStyle()">
                        <p class="text-center">
                            <span class="icon-container"><i class="icon-mobile" ng-class="{'icon-th-large-mobile':trStyle,'icon-th-list-mobile':!trStyle}"></i></span>
                        </p>
                        <p class="text-center" ng-show="!trStyle">{{ 'list_view' | translate }}</p>
                        <p class="text-center" ng-show="trStyle">{{ 'grid_view' | translate }}</p>
                    </div>
                    <div class="col-xs-4" ng-click="showMobileSearchBar($event)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-search-mobile"></i></span></p>
                        <p class="text-center">{{ 'search' | translate }}</p>
                    </div>
                </div>
            </div>
            <div ng-if="fileOptions" ng-click="closeOptionsPanel()">
                <div ng-if="choseFile.isDocument()" class="row">
                    <div class="col-xs-3" ng-click="showInfo(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-info-mobile"></i></span></p>
                        <p class="text-center">{{ 'info' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-if="!isSharedWithMe" ng-click="mobileShare(choseFile,$event)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-share-mobile"></i></span></p>
                        <p class="text-center">{{ 'Share' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="preview(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-preview-mobile"></i></span></p>
                        <p class="text-center">{{ 'view' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-if="!isSharedWithMe" ng-click="moveTo(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-move-to-mobile"></i></span></p>
                        <p class="text-center">{{ 'move_to' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-if="!isSharedWithMe" ng-click="rename(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-rename-mobile"></i></span></p>
                        <p class="text-center">{{ 'rename' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="delete(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-delete-mobile"></i></span></p>
                        <p class="text-center">{{ 'delete' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-if="isSharedWithMe && choseFile.description.canDownload==1" ng-click="download(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-down-mobile"></i></span></p>
                        <p class="text-center">{{ 'download' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-if="!isSharedWithMe" ng-click="download(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-down-mobile"></i></span></p>
                        <p class="text-center">{{ 'download' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-if="!isSharedWithMe" ng-click="openModifyFilePicker(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-up-mobile"></i></span></p>
                        <p class="text-center">{{ 'upload_new_version' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="compress_PDF('OPTIMIZER',choseFile)" ng-if="!isSharedWithMe && phantomSubscriptionStatus && !isEnterpriseSite && choseFile.contentStreamMimeType==='application/pdf'">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-compress-mobile"></i></span></p>
                        <p class="text-center">{{'compress_PDF' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="showPanelInPanel('convert',$event)" ng-if="!isSharedWithMe && phantomSubscriptionStatus && !isEnterpriseSite && choseFile.contentStreamMimeType==='application/pdf'">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-convert-mobile"></i></span></p>
                        <p class="text-center">{{ 'convert' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="showPanelInPanel('organize',$event)" ng-if="!isSharedWithMe && phantomSubscriptionStatus && !isEnterpriseSite && choseFile.contentStreamMimeType==='application/pdf'">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-organizer-mobile"></i></span></p>
                        <p class="text-center">{{ 'organize' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="showPanelInPanel('protect',$event)" ng-if="!isSharedWithMe && phantomSubscriptionStatus && !isEnterpriseSite && choseFile.contentStreamMimeType==='application/pdf'">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-protect-mobile"></i></span></p>
                        <p class="text-center">{{ 'protect' | translate }}</p>
                    </div>
                </div>
                <div ng-if="!choseFile.isDocument()" class="row">
                    <div class="col-xs-4" ng-click="rename(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-rename-mobile"></i></span></p>
                        <p class="text-center">{{ 'rename' | translate }}</p>
                    </div>
                    <div class="col-xs-4" ng-click="deleteFolder(choseFile,null,true,true)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-delete-mobile"></i></span></p>
                        <p class="text-center">{{ 'delete' | translate }}</p>
                    </div>
                    <div class="col-xs-4" ng-if="!isSharedWithMe" ng-click="moveTo(choseFile)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-move-to-mobile"></i></span></p>
                        <p class="text-center">{{ 'move_to' | translate }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mobile-tools-options animated neg-z-index" ng-if="device=='mobile'" ng-class="{'slideInUp':mobileShowToolsPanel,'slideOutDown':!mobileShowToolsPanel,'neg-z-index':!firstInit}">
        <div ng-show="firstInit" class="padding-15px">
            <div ng-if="sharePanel" class="row">
                <div ng-if="publicShare">
                    <div class="panel-header">
                        <i class="fa fa-angle-left font-18 pd-lr-10" ng-click="backToPreviewOptions()"></i>
                        <span class="m-l-5">{{ 'Link to share' | translate }}</span>
                    </div>
                    <div class="panel-header" style="padding:0px 30px 14px 30px">
                        <p>{{ 'Copy link' | translate}}</p>
                        <div class="input-group">
                            <input id="file-share-link" readonly type="text" tooltip-enable="tooltipIsOpen" tooltip-is-open="tooltipIsOpen" tooltip-class="copy-callback" uib-tooltip="{{ copy_status | translate}}" class="form-control" value="{{ choseFile.sharedLink }}">
                            <span class="input-group-btn" ngclipboard-success="copyOnSuccess(e)" ngclipboard-error="copyOnError(e)" ngclipboard data-clipboard-target="#file-share-link" style="font-size: 14px">
                            <button class="btn btn-custom-primary">{{ 'copy' | translate }}</button>
                        </span>
                        </div>
                    </div>
                    <p style="padding: 10px 15px;">{{ 'Share link via' | translate }}</p>
                    <div class="col-xs-3" ng-click="shareTo('email',$event)">
                        <p class="text-center">
                        <span class="icon-container">
                            <a class="mailTo">
                                <i class="icon-mobile icon-email-mobile"></i>
                            </a>
                        </span>
                        </p>
                        <p class="text-center font-12px">{{ 'email' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="shareTo('facebook',$event)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-facebook-mobile"></i></span></p>
                        <p class="text-center font-12px">{{ 'facebook' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="shareTo('google',$event)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-google-mobile"></i></span></p>
                        <p class="text-center font-12px">{{ 'google' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="shareTo('twitter',$event)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-twitter-mobile"></i></span></p>
                        <p class="text-center font-12px">{{ 'twitter' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="shareTo('linkedin',$event)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-linkedin-mobile"></i></span></p>
                        <p class="text-center font-12px">{{ 'in' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="shareTo('weibo',$event)">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-sina-mobile"></i></span></p>
                        <p class="text-center font-12px">{{ 'sina' | translate }}</p>
                    </div>
                    <div class="col-xs-3" ng-click="showQrcode()">
                        <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-qrcode-mobile"></i></span></p>
                        <p class="text-center font-12px">{{ 'qrcode' | translate }}</p>
                    </div>
                </div>
                <div ng-if="!publicShare" class="clearfix">
                    <div class="panel-header">
                        <h4 class="text-center">
                            <span class="m-l-5">{{ 'sharing_doc' | translate }}</span>
                            <i class="fa fa-times pull-right" ng-click="closePanelInPanel()"></i>
                        </h4>
                    </div>
                    <p>{{ 'file_link' | translate }}</p>
                    <div class="input-group">
                        <input id="file-share-link" readonly type="text" tooltip-enable="tooltipIsOpen" tooltip-is-open="tooltipIsOpen" tooltip-class="copy-callback" uib-tooltip="{{ copy_status | translate}}" class="form-control b-radius-0" value="{{ choseFile.sharedLink }}">
                        <span class="input-group-btn b-radius-0" ngclipboard-success="copyOnSuccess(e)" ngclipboard-error="copyOnError(e)" ngclipboard data-clipboard-target="#file-share-link" style="font-size: 14px">
                            <button class="b-radius-0 btn btn-custom-primary">{{ 'copy' | translate }}</button>
                        </span>
                    </div>
                    <div class="m-t-10">

                        <p>
                            <span>{{ 'shared_method' | translate }}</span>：<span>{{ 'secret_share' | translate }}</span>
                        </p>
                    </div>
                    <style>
                        .secret-share-user-list{
                            margin: 0;
                            padding: 10px;
                            background: white;
                            border: 1px solid #b8b8b8;
                        }
                        .secret-share-user-list li{
                            list-style: none;
                        }
                    </style>
                    <div ng-if="sharedUser.length>0">
                        <p>{{ 'shared_users' | translate }}</p>
                        <ul class="secret-share-user-list">
                            <li ng-repeat="user in sharedUser">
                                {{ user }}
                            </li>
                        </ul>
                    </div>
                    <div>
                        <button class="btn btn-custom-primary pull-right b-radius-0 m-t-10" ng-click="stopShare()">
                            <span>{{ 'stop_share' | translate }}</span> <i ng-show="stopSharing" class="fa fa-spinner fa-pulse"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div ng-if="convertPanel" class="row">
                <div class="panel-header">
                    <i class="fa fa-angle-left font-18" ng-click="backToPreviewOptions()"></i>
                    <span class="m-l-5">{{ 'Convert' | translate }}</span>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('PDFTOWORD',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pdf2word-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ '2word' | translate }}</p>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('PDFTOEXCEL',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pdf2excel-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ '2excel' | translate }}</p>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('PDFTOPPT',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pdf2ppt-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ '2ppt' | translate }}</p>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('PDFTOIMG',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pdf2jpg-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ '2img' | translate }}</p>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('PDFTOTXT',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pdf2text-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ '2txt' | translate }}</p>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('PDFTOHTML',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pdf2html-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ '2html' | translate }}</p>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('PDFTOCPDF',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pdf2cpdf-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ '2cPdf' | translate }}</p>
                </div>
                <div class="col-xs-3" ng-click="convertPdfTo('EXPORTALLIMG',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-exportallimage-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'export_all_image' | translate }}</p>
                </div>
            </div>
            <div ng-if="organizePanel" class="row">
                <div class="panel-header">
                    <i class="fa fa-angle-left font-18" ng-click="backToPreviewOptions()"></i>
                    <span class="m-l-5">{{ 'Organize' | translate }}</span>
                </div>
                <div class="col-xs-4" ng-click="organizePDF('MERGEPDF',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-merge-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'merge_PDF' | translate }}</p>
                </div>
                <div class="col-xs-4" ng-click="organizePDF('SPLITPDF',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-split-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'split_PDF' | translate }}</p>
                </div>
                <div class="col-xs-4" ng-click="organizePDF('PAGEORGANIZER',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-organizer-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'organize_PDF' | translate }}</p>
                </div>
                <div class="col-xs-4" ng-click="organizePDF('WATERMARK',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-watermark-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'add_watermark' | translate }}</p>
                </div>
                <div class="col-xs-4" ng-click="organizePDF('PDFHEADERFOOTER',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-headerfooter-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'add_header_footer' | translate }}</p>
                </div>
                <div class="col-xs-4" ng-click="organizePDF('PDFFLATTEN',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-flatten-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'flatten_PDF' | translate }}</p>
                </div>
            </div>
            <div ng-if="protectPanel" class="row">
                <div class="panel-header">
                    <i class="fa fa-angle-left font-18" ng-click="backToPreviewOptions()"></i>
                    <span class="m-l-5">{{ 'Protect' | translate }}</span>
                </div>
                <div class="col-xs-6" ng-click="protectPdf('PDFPROTECT',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-pwdprotect-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'password_protect' | translate }}</p>
                </div>
                <div class="col-xs-6" ng-click="protectPdf('PDFREDACTOR',choseFile)">
                    <p class="text-center"><span class="icon-container"><i class="icon-mobile icon-redact-mobile"></i></span></p>
                    <p class="text-center font-12px">{{ 'redact_PDF' | translate }}</p>
                </div>
            </div>
            <!--<div ng-if="compressPanel" class="row">-->
            <!--<div class="col-xs-4" ng-click="rename(choseFile)">-->
            <!--<p class="text-center"><span class="icon-container"><i class="icon-mobile icon-rename-mobile"></i></span></p>-->
            <!--<p class="text-center">Rename</p>-->
            <!--</div>-->
            <!--<div class="col-xs-4" ng-click="delete(choseFile)">-->
            <!--<p class="text-center"><span class="icon-container"><i class="icon-mobile icon-delete-mobile"></i></span></p>-->
            <!--<p class="text-center">Delete</p>-->
            <!--</div>-->
            <!--</div>-->
        </div>
    </div>
    <div class="search-bar pos-rel" ng-if="showSearchBar">
        <div class="search-bar-form pos-rel">
            <i class="fa fa-search pos-absolute"></i>
            <input type="search" ng-model="mobileSearchInput.keyword" ng-keyup="mobileSearch($event)">
            <span class="clear-input pos-absolute" ng-click="clearSearchInput()"><i class="fa fa-times-circle"></i></span>
        </div>
        <span ng-click="searchBarCancelBtnFn()" class="cancel-btn">{{ 'cancel' | translate }}</span>
    </div>
    <div class="add-options animated" ng-class="{'slideInUp':isAddOptionsShow,'slideOutDown':!isAddOptionsShow,'neg-z-index':!firstInit}">
        <div ng-if="firstInit">
            <div class="add-folder text-center font-22" ng-click="mobileCreateFolder()">
                <i class="fa fa-folder"></i>
            </div>
            <div class="add-file text-center font-22" ng-click="mobileUploadFile()">
                <!--<i class="fa fa-plus"></i>-->
                <i class="icon-mobile icon-up-mobile pure-white" style="width: 22px;height: 22px;"></i>
            </div>
        </div>
    </div>
    <div class="mobile-add-file-folder" ng-if="device==='mobile' && progress==100 && ((currentFolder.allowableActions.canCreateDocument && supportFile) || currentFolder.allowableActions.canCreateFolder)" ng-click="toggleAddOptions()">
        <div class="text-center add-icon-container font-22">
            <i class="fa " ng-class="{'fa-plus':!isAddOptionsShow,'fa-times':isAddOptionsShow}"></i>
        </div>
    </div>
    <div id="qrcode" ng-show="showBigQrcode" style="    position: absolute;
    z-index: 1050;
    height: 180px;
    width: 180px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;"></div>
    <div class="mobile-mask" ng-if="showMobileMask" ng-click="closeOptionsPanel()"></div>
</div>
